<template>
  <header>
    <div class="logo" @click="to('/')">
      <span class="logo-name">{{ $t('blogName') }}</span>
    </div>
    <nav class="navigation-container">
      <ul class="navigation">
        <li
          v-for="(item, index) in menu.item"
          :key="index"
          @click="to(item.path)"
        >
          {{ item.name }}
        </li>
      </ul>
    </nav>
    <div class="header-controls">
      <el-icon class="navigation-container"><Search /></el-icon>
      <div class="translate navigation-container" @click="showPopover">
        <el-icon><Baseball /></el-icon>
        <span>{{ $t('changeLanguage.name') }}</span>
        <div
          v-click-outside="close"
          :class="{ popover: !data.isPop, 'popover-show': data.isPop }"
        >
          <ul>
            <li @click="changeZh">中文</li>
            <li @click="changeEn">EN</li>
          </ul>
        </div>
      </div>

      <span v-if="useLoginStore().token == ''" class="login" @click="login">
        {{ $t('login.name') }}
      </span>

      <el-dropdown v-else>
        <el-avatar
          class="avatar-round"
          :src="
            data.userInfo.logoSrc
              ? data.userInfo.logoSrc
              : '../assets/default_logo.jpeg'
          "
        />
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>个人空间</el-dropdown-item>
            <el-dropdown-item @click="logout">登出</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>

      <el-switch
        v-model="useThemeStore().isLightThem"
        class="mt-2"
        size="large"
        style="margin-left: 24px"
        inline-prompt
        :active-icon="Sunny"
        :inactive-icon="Moon"
        @change="changeThem"
      />
    </div>
  </header>
</template>

<script setup lang="ts">
import { Baseball, Moon, Search, Sunny } from '@element-plus/icons-vue';
import { useThem } from '../hooks/changeColor';
import {
  getCurrentInstance,
  nextTick,
  onMounted,
  onUnmounted,
  reactive,
  watch
} from 'vue';
import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router';
import useThemeStore from '@/store/modules/theme.store.ts';
import { useDialog } from 'crane-element';
import Login from '@/pages/login/Login.vue';
import useLoginStore from '@/store/modules/login.store.ts';
import useBaseInfoStore from '@/store/modules/baseInfo.store.ts';
import { SelfInfoDTO } from '@/http/public.type.ts';
import { _logout } from '@/pages/login/login.service.ts';
import { ElNotification } from 'element-plus';
import { _getWebsiteInfo } from '@/share/share.service.ts';
import useWebsiteInfoStore from '@/store/modules/websiteInfo.store.ts';
import useLanguageStore from '@/store/modules/language.store.ts';

const { openDialog } = useDialog();

const router = useRouter();

const { locale } = useI18n();

const { $t } = getCurrentInstance()?.proxy as any;

const { changeThem } = useThem();

const data = reactive({
  isPop: false,
  userInfo: {} as SelfInfoDTO,
  isPC: true
});

const menu = reactive({
  item: [] as Menu[]
});

const minWidth = 1160;

interface Menu {
  name: any;
  path: string;
}

onMounted(() => {
  const isLightThem = useThemeStore().isLightThem;
  if (isLightThem) {
    document.querySelector('html')?.removeAttribute('class');
  } else {
    document.querySelector('html')?.setAttribute('class', 'dark');
  }

  setMenu();
});

onMounted(() => {
  getUserInfo();
  getWebsiteInfo();
  handleResize();
  useLanguageStore().setLanguage('zh');
  window.addEventListener('resize', handleResize);
});

onUnmounted(() => {
  window.removeEventListener('resize', handleResize);
});

watch(
  () => useBaseInfoStore().totalBaseInfo,
  () => {
    if (useLoginStore().token === '') {
      return;
    }
    const totalBaseInfo = useBaseInfoStore().totalBaseInfo;
    data.userInfo = totalBaseInfo?.selfInfoDTO as SelfInfoDTO;
  }
);

function setMenu() {
  menu.item = [
    { name: $t('nav.index'), path: '/' },
    { name: $t('nav.talk'), path: '/talk' },
    { name: $t('nav.about'), path: '' },
    { name: $t('nav.archive'), path: '' },
    { name: $t('nav.tags'), path: '' },
    { name: $t('nav.message'), path: '' },
    { name: $t('nav.friend'), path: '' },
    { name: $t('nav.album'), path: '/album' }
  ] as Menu[];
}

function getUserInfo() {
  if (useLoginStore().token === '') {
    return;
  }
  const totalBaseInfo = useBaseInfoStore().totalBaseInfo;
  data.userInfo = totalBaseInfo?.selfInfoDTO as SelfInfoDTO;
}

function login() {
  openDialog({
    component: Login,
    options: {
      destroyOnClose: true,
      width: data.isPC ? '50%' : '100%'
    },
    params: {}
  });
}

function to(path: string) {
  router.push(path);
}

const showPopover = () => {
  data.isPop = true;
};

const close = () => {
  if (data.isPop) {
    data.isPop = false;
  }
};

// 切换中文
function changeZh() {
  locale.value = 'zh';
  useLanguageStore().setLanguage('zh');
  nextTick(() => {
    data.isPop = false;
    setMenu();
  });
}
// 切换英文
function changeEn() {
  locale.value = 'en';
  useLanguageStore().setLanguage('en');
  nextTick(() => {
    data.isPop = false;
    setMenu();
  });
}

function logout() {
  _logout().then((res) => {
    if (res.code === 200) {
      useLoginStore().setToken('');
      useBaseInfoStore().setTotalBaseInfo({
        menuTree: [],
        selfInfoDTO: {}
      });
      ElNotification.success('登出成功');
    }
  });
}

const getWebsiteInfo = () => {
  _getWebsiteInfo().then((res) => {
    if (res.code === 200) {
      useWebsiteInfoStore().setWebsiteInfo(res.data);
    }
  });
};

function handleResize() {
  data.isPC = window.innerWidth > minWidth;
}
</script>

<style scoped lang="less">
header {
  width: 78vw;
  height: 150px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;
  z-index: 100;
  position: relative;

  @media (max-width: 1161px) {
    /* 在宽度小于或等于 1035px 的屏幕上应用以下样式 */
    /* 在这里添加你的样式规则 */
    .navigation-container {
      display: none !important;
    }
  }

  @media (min-width: 1160px) {
    /* 在宽度大于 1035px 的屏幕上应用以下样式 */
    /* 在这里添加你的样式规则 */
    .navigation-container {
      display: flex !important;
    }
  }

  .logo {
    display: flex;
    align-items: center;
    position: relative;
    cursor: pointer;

    .logo-name {
      font-size: 30px;
      color: #fff;

      @media (min-width: 1160px) {
        /* 在宽度大于 1035px 的屏幕上应用以下样式 */
        /* 在这里添加你的样式规则 */
        &::after {
          content: '';
          width: 65px;
          height: 65px;
          left: 65px;
          top: -20px;
          position: absolute;
          opacity: 0.7;
          background: url('../assets/logo.png');
          background-size: 65px 65px;
        }
      }
    }
  }

  nav {
    display: flex;

    .navigation {
      display: flex;
      list-style: none;
      padding: 0;
      margin: 0;

      li {
        display: inline-block;
        margin-right: 20px; /* 可选：如果你想在项目之间添加一些间距 */
        color: #fff;
        cursor: pointer;
        padding: 5px 10px;
        border-radius: 10px;
        user-select: none;

        &:hover {
          background-color: rgb(45, 64, 115);
        }
      }
    }
  }

  .header-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    padding-right: 0.5rem;
    font-size: 30px;
    user-select: none;

    .login {
      font-size: 16px;
      cursor: pointer;
      margin-left: 15px;
      transition: opacity 0.25s ease;
      &:hover {
        color: rgb(147, 141, 141);
      }
    }

    i {
      transition: opacity 0.25s ease;
      cursor: pointer;

      &:hover {
        color: rgb(147, 141, 141);
      }
    }

    .translate {
      margin-left: 15px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 25px;
      cursor: pointer;
      color: #fff;
      position: relative;

      .popover {
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 35px;
        left: -65px;
        width: 200px;
        height: 0;
        border-radius: 10px;
        background-color: var(--background-primary);
        z-index: 100;
        box-shadow: var(--shadow);
        transition: height 0.1s ease-in-out;

        ul {
          display: none;
        }
      }

      .popover-show {
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 35px;
        left: -65px;
        width: 200px;
        height: 80px;
        border-radius: 10px;
        background-color: var(--background-primary);
        z-index: 100;
        box-shadow: var(--shadow);
        transition: height 0.1s ease-in-out;

        ul {
          display: block;
          list-style: none;
          padding: 0;
          margin: 0;
          font-size: 18px;
          color: var(--font-color);
          width: 100%;

          li {
            text-align: center;

            &:hover {
              background-color: #dad9d9;
            }
          }
        }
      }

      span {
        font-size: 15px;
      }

      &:hover {
        color: rgb(147, 141, 141);
      }
    }
  }
}

.avatar-round {
  margin-left: 15px;
  cursor: pointer;
  transition: transform 0.25s ease;

  &:hover {
    color: rgb(147, 141, 141);
    transform: rotate(720deg);
  }
}
</style>
